<template>
	<view class="content">
		<!-- 导航栏 -->
		<headerView />

		<!-- banner -->
		<view class="absolute">
			<view class="titleView">
				<view class="titleView-text">Product series</view>
				<view class="titleView-span">
					Home /
					<text>products</text>
				</view>
			</view>
		</view>

		<!-- 产品 -->
		<view class="content-conter">
			<!-- 搜索条件 -->
			<view class="searchView">
				<view class="searchView-li">
					<view class="searchView-li-label">分类筛选：</view>
					<view class="searchView-li-value">
						<view class="item action">全部产品</view>
						<view class="item">现代简约</view>
						<view class="item">传统经典</view>
					</view>
				</view>

				<view class="searchView-li">
					<view class="searchView-li-label">材质分类：</view>
					<view class="searchView-li-value">
						<view class="item action">所有材质</view>
						<view class="item">纯羊毛</view>
						<view class="item">真丝混纺</view>
						<view class="item">棉麻</view>
						<view class="item">聚酯纤维</view>
					</view>
				</view>

				<view class="searchView-input">
					<el-input v-model="keyword" @keydown.enter="wordSearch" placeholder="Search products...">
						<template #suffix>
							<el-icon size="20px" @click="wordSearch">
								<Search />
							</el-icon>
						</template>
					</el-input>
				</view>
			</view>

			<!-- 产品列表 -->
			<view class="listView">
				<el-row class="elRow" gutter="20">
					<el-col :xs="24" :sm="12" :md="8" :lg="8" v-for="(item, index) in productList" :key="index" class="elCol">
						<productView :row="item" />
					</el-col>
				</el-row>
			</view>

			<view class="pageVeiw">
				<el-pagination
					v-model:current-page="currentPage"
					v-model:page-size="pageSize"
					layout="prev, pager, next"
					:total="1000"
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:hide-on-single-page="true"
				/>
			</view>
		</view>

		<!-- 底部导航 -->
		<footerView />
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { onLoad, onShow, onHide } from '@dcloudio/uni-app';
import { Search } from '@element-plus/icons-vue';
import headerView from '@/components/header/index.vue'; //导航
import banner from '@/components/banner/index.vue'; //轮播图
import productView from '@/components/product/index.vue'; //产品
import footerView from '@/components/footer/index.vue'; //底部导航

// 分类列表
const classificationData = ref([]);
const classification = ref(''); //分类选择
const material = ref(''); // 材质选择
const keyword = ref(''); //搜素条件
const pageSize = ref(100);
const currentPage = ref(5);

// 推荐产品系列
const productList = ref([
	{
		title: '东方传统纹饰地毯',
		text: '纯手工编织，真丝与羊毛混纺，精细图案',
		img: 'https://picsum.photos/id/116/800/600',
		type: '真丝羊毛',
		id:1
	},
	{
		title: '北欧几何纹理地毯',
		text: '100%纯新羊毛，机织工艺，耐磨耐用',
		img: 'https://picsum.photos/id/129/800/600',
		type: '纯羊毛',
		id:2
	},
	{
		title: '现代抽象艺术地毯',
		text: '进口新西兰羊毛，环保染料，色彩持久',
		img: 'https://picsum.photos/id/139/800/600',
		type: '纯羊毛',
		id:3
	},
	{
		title: '民族风情手工地毯',
		text: '传统工艺手工打结，天然材质，文化传承',
		img: 'https://picsum.photos/id/146/800/600',
		type: '真丝',
		id:4
	},
	{
		title: '简约条纹棉麻地毯',
		text: '天然棉麻材质，环保舒适，适合现代家居',
		img: 'https://picsum.photos/id/143/800/600',
		type: '棉麻',
		id:5
	},
	{
		title: '现代艺术几何地毯',
		text: '高品质聚酯纤维，易清洁，适合高流量区域',
		img: 'https://picsum.photos/id/136/800/600',
		type: '聚酯纤维',
		id:6
	},
	{
		title: '北欧简约地毯',
		text: '高品质聚酯纤维，易清洁，适合高流量区域',
		img: 'https://picsum.photos/id/135/800/600',
		type: '聚酯纤维',
		id:7
	},
	{
		title: '现代简约地毯',
		text: '高品质聚酯纤维，易清洁，适合高流量区域',
		img: 'https://picsum.photos/id/134/800/600',
		type: '聚酯纤维',
		id:8
	}
]);

// 搜索
const wordSearch = () => {
	console.log(keyword.value);
};

// 条数修改
const handleSizeChange = (val) => {
	console.log(`${val} items per page`);
};

// 页数修改
const handleCurrentChange = (val) => {
	console.log(`current page: ${val}`);
};
</script>

<style scoped lang="scss">
.content {
	width: 100%;
	min-height: 100vh;
	background-color: #fff;

	.absolute {
		width: 100%;
		height: 240px;
		background: url('https://picsum.photos/id/155/1920/800') no-repeat center center;
		background-size: cover;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;

		&::after {
			content: '';
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			background-color: rgba(26, 54, 93, 0.6);
		}

		.titleView {
			width: auto;
			height: auto;
			position: relative;
			z-index: 2;
			text-align: center;
			display: flex;
			flex-direction: column;
			align-items: center;

			&-text {
				font-size: 40px;
				color: #fff;
				font-weight: bold;
				text-align: center;
				line-height: 1.5;
			}

			&-span {
				font-size: 16px;
				display: flex;
				gap: 3px;
				margin: 0 auto;
				color: #fff;

				text {
					color: #b7922d;
				}
			}
		}
	}

	&-conter {
		width: 100%;
		max-width: 1200px;
		margin: 0 auto;
		padding: 40px 0;
		box-sizing: border-box;

		// 搜索栏
		.searchView {
			width: 100%;
			height: auto;
			background-color: rgb(249, 250, 251);
			border-radius: 10px;
			padding: 20px;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			gap: 20px;
			margin-bottom: 30px;

			&-li {
				width: 100%;
				height: auto;
				display: flex;
				align-items: start;
				gap: 6px;
				line-height: 30px;
				font-size: 16px;

				&-label {
					width: auto;
					height: auto;
					font-weight: bold;
				}

				&-value {
					flex: 1;
					width: 100%;
					border-radius: 5px;
					padding: 0 10px;
					box-sizing: border-box;
					display: flex;
					flex-wrap: wrap;
					gap: 10px;

					.item {
						cursor: pointer;

						&.action {
							color: #b7922d;
						}
					}
				}
			}

			&-input {
				width: 100%;
				height: 60px;
				padding: 0 10px;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: center;

				:deep(.el-input) {
					width: 60%;
					height: 100%;
					border: 1px solid #dedede;
					border-radius: 60px;
					overflow: hidden;
					padding: 0 14px 0 20px;
					background-color: #fff;

					.el-input__wrapper,
					.el-input-group__append {
						border: none;
						box-shadow: none;

						.el-input__inner {
							height: 100%;
							font-size: 18px;
						}
					}
				}
			}
		}

		// 产品列表
		.listView {
			width: 100%;
			height: auto;

			.elRow {
				width: 100%;
				margin: 0 auto !important;

				.elCol {
					margin-bottom: 20px;
				}
			}
		}

		//分页
		.pageVeiw {
			width: 100%;
			height: auto;
			display: flex;
			justify-content: flex-end;

			:deep(.btn-prev),
			:deep(.btn-next) {
				border: none;
				background: none;
			}
		}
	}
}

@media screen and (max-width: 768px) {
	.listView {
		:deep(.elCol) {
			padding: 0 10px !important;
		}
	}
	
	.pageVeiw{
		justify-content: center;
	}
}
</style>
